<template>
  <div class="home">
    <!-- 布局 -->
    <el-container>
      <el-header>
        <div class="left">
          <!-- <span>后台管理</span> -->
        </div>
        <div class="right">
          <h1 class="h">后台管理</h1>
          <!-- <p class="el-icon-switch-button"></p> -->
          <el-button @click="out" class="btn" type="info" round
            ><span ></span>退出登陆</el-button
          >
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse?'60px':'200px'">
          <!-- 侧边栏 -->
          <p @click='isCollapse = !isCollapse'><i class="el-icon-s-data"></i></p>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#020410"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
            unique-opened
          >
            <el-submenu :index="item.path" v-for="item in list" :key="item.id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item.authName}}</span>
              </template>
              
              <el-menu-item-group v-for="ele in item.children" :key="ele.id">
                <el-menu-item :index="ele.path">{{ele.authName}}</el-menu-item>
              </el-menu-item-group>
              
            </el-submenu>
            <el-submenu index="bbb">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>数据统计</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="kkk">数据报表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 第二个坑 -->
          <!-- <h1>欢迎回来~</h1> -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getmenus } from "@/Api/index.js";
export default {
  data() {
    return {
      list:[],
      isCollapse: false
    };
  },
  mounted() {},
  methods: {
    // 点击退出登陆
    getm() {
      getmenus().then(res => {
        // console.log(res);
        this.list = res.data
      });
    },
    out() {
      // 删除token并且跳转到登陆页面
      sessionStorage.removeItem("token");
      this.$router.push({ path: "/login" });
    },
  },
  components: {},
  created() {
    this.getm()
  },
};
</script>

<style lang='scss' scoped>
// h1{
//   color: #fff;
//   font-size: 50px;
// }
.h {
  margin-left: 15px;
}
.btn {
  height: 4vh;
  margin-top: 10px;
}
.right {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
span {
  color: #fff;
  display: inline-block;
  // line-height: 60px;
  margin-left: 8px;
  // margin-top: 6px;
}
h1 {
  color: #fff;
}
.left {
  width: 203px;
  height: 60px;
  // background-color: #59d5a3;
  margin-left: -24px;
  line-height: 60px;
}
.el-header {
  background-color: #363c42;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  line-height: 60px;
  // justify-content: space-around;
}

.el-aside {
  background-color: #313743;
  color: #333;
  text-align: center;
  // line-height: 200px;
  height: 100vh;
  height: 10000px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  // line-height: 160px;
}
</style>
